<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>云钢</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <style>
        .aui-bar-light{ color: black; }
        .aui-bar-nav.aui-bar-light .aui-iconfont{ color: black; }
        .carousel{ width: 94%; margin: 1rem auto 0; }
        .aui-slide-wrap .aui-slide-node {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 73%;
    list-style: none;
    overflow: hidden;
    background: #ffffff;
}
.aui-slide-page-wrap {
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: absolute;
    padding: 0;
    left: 0;
    right: 0;
    bottom: 66px;
    z-index: 9999;
    text-align: center;
}
.a{
    color: #fff;
    line-height: 1.6rem;
    width: 3rem;   

height: 1.6rem;   

transform:skew(-30deg); /*设置倾斜度为-30*/   

-webkit-transform: skew(-30deg);   

-moz-transform: skew(-30deg);   

-o-transform:skew(-30deg);   

-ms-transform:skew(-30deg);   

background-color: red;
border-radius: 10px;
}
    </style>
</head>

<body>
    <!-- <header class="aui-bar aui-bar-nav aui-bar-light" id="header">
        <a class="aui-pull-left aui-btn" onclick="backpage()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">首页</div>
    </header> -->
    <div id="app" v-cloak>
        <!-- head -->
        <div class="widthmax bg-iblue padding-top-xl" style="height:10rem">
            <header class="aui-bar aui-bar-nav" id="header">
                <a class="aui-pull-left aui-btn">
                    <span class="aui-iconfont aui-icon-location"></span>
                    <span>太原市</span>
                </a>
                <div class="aui-title" style="left:4rem; right: 2rem;">
                    <div class="aui-searchbar bg-iblue" id="search">
                        <div class="aui-searchbar-input aui-border-radius">
                            <i class="aui-iconfont aui-icon-search"></i>
                            <input type="search" placeholder="请输入搜索内容" id="search-input">
                            <div class="aui-searchbar-clear-btn">
                                <i class="aui-iconfont aui-icon-close"></i>
                            </div>
                        </div>
                        <div class="aui-searchbar-btn" tapmode>取消</div>
                    </div>
                </div>
                <a class="aui-pull-right aui-btn">
                    <span class="aui-iconfont aui-icon-comment"></span>
                </a>
            </header>
            <div class="carousel">
                <div id="aui-slide3">
                    <div class="aui-slide-wrap" >
                        <div class="aui-slide-node bg-dark">
                            <img src="../image/carousel.png" />
                        </div>
                        <div class="aui-slide-node bg-dark">
                            <img src="../image/carousel.png" />
                        </div>
                        <div class="aui-slide-node bg-dark">
                            <img src="../image/carousel.png" />
                        </div>
                    </div>
                    <div class="aui-slide-page-wrap"><!--分页容器--></div>
                </div>
            </div>
        </div>
        <!-- announcement  -->
        <div class="widthmax padding-lr" style="margin-top: 3rem;">
            <div class="widthmax bg-white radius padding-lr padding-tb margin-top flex-between">
                <div class="a text-center">公告</div>
                <div style="width: 77%;height: 1rem;margin-top: 0.2rem;overflow:hidden; text-overflow:ellipsis;white-space: nowrap;" class="text-black hidden">平台新上线，邀您一起走进可视电子交易平...</div>
            </div>
        </div>
        <!-- nav -->
        <div class="margin-top-xl padding-lr-xl flex-between">
            <div>
                <div style="width:2.31rem;margin: 0 auto;"><img src="../image//index/none.png" alt="" style="width: 100%;" onclick="openNewPage()"></div>
                <h4 class="text-center">货物信息</h4>
            </div>
            <div>
                <div style="width:2.43rem;margin: 0.2rem auto 0;"><img src="../image//index/ntwo.png" alt="" style="width: 100%;"></div>
                <h4 class="text-center">求购信息</h4>
            </div>
            <div>
                <div style="width:2.43rem;margin: 0.29rem auto 0;"><img src="../image//index/nthree.png" alt="" style="width: 100%;"></div>
                <h4 class="text-center">热点资讯</h4>
            </div>
            <div>
                <div style="width:2.53rem;margin: 0 auto;"><img src="../image//index/nfour.png" alt="" style="width: 100%;"></div>
                <h4 class="text-center">变废为宝</h4>
            </div>
            <div>
                <div style="width:2.38rem;margin: 0 auto;"><img src="../image//index/nfive.png" alt="" style="width: 100%;"></div>
                <h4 class="text-center">走进园区</h4>
            </div>
        </div>
        <!-- information -->
        <div class="margin-top-xl padding-lr">
            <div class="radius padding-bottom" style="background: #fff;">
                <div class="aui-content aui-margin-b-15">
                    <ul class="aui-list aui-list-in" style="border:none">
                        <li class="aui-list-item" style="border:none">
                            <div class="aui-list-item-inner aui-list-item-arrow">
                                <div class="aui-list-item-title"><i class="aui-iconfont aui-icon-mail padding-right"></i>精选资讯</div>
                                <div class="aui-list-item-right">
                                    <div style="margin-top: 0.1rem;">更多</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="padding-lr flex-between">
                    <div style="width: 6.56rem" class="margin-right">
                        <div style="position: relative;">
                            <img src="../image/index/item.png" alt="" style="width: 100%;">
                            <p class="widthmax" style="font-size: 12px;padding: 3px;background: #000;color: #ffff;position:absolute;bottom: 0;opacity: 0.8;">废钢涨势明显矿...</p>
                        </div>
                    </div>
                    <div style="width: 6.56rem" class="margin-right">
                        <div style="position: relative;">
                            <img src="../image/index/item.png" alt="" style="width: 100%;">
                            <p class="widthmax" style="font-size: 12px;padding: 3px;background: #000;color: #ffff;position:absolute;bottom: 0;opacity: 0.8;">废钢涨势明显矿...</p>
                        </div>
                    </div>
                    <div style="width: 6.56rem" class="margin-right">
                        <div style="position: relative;">
                            <img src="../image/index/item.png" alt="" style="width: 100%;">
                            <p class="widthmax" style="font-size: 12px;padding: 3px;background: #000;color: #ffff;position:absolute;bottom: 0;opacity: 0.8;">废钢涨势明显矿...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- tab -->
        <div class="margin-top-xl">
            <div class="aui-tab" id="tab">
                <div class="aui-tab-item"><img src="../image/index/fire.png" alt="" style="width: 0.84rem;height: 1.15rem;display: inline-block;position: relative;top: 0.3rem;"> 热门货源</div>
                <div class="aui-tab-item"><img src="../image/index/fire.png" alt="" style="width: 0.84rem;height: 1.15rem;display: inline-block;position: relative;top: 0.3rem;"> 最新采购</div>
            </div>
        </div>
        <!-- goods -->
        <div class="padding-top padding-lr">
            <div class="bg-white">
                <div class="aui-card-list aui-border-t aui-border-b">
                    <div class="aui-card-list-header aui-card-list-user">
                        <div class="aui-card-list-user-avatar">
                            <img src="../image/me/header.jpg" class="aui-img-round">
                        </div>
                        <div class="aui-card-list-user-name">
                            <div class="aui-font-size-16">钢材售卖货品名称</div>
                            <div class="aui-text-danger text-md text-bold">1.2元/吨</div>
                        </div>
                        <div class="aui-card-list-user-info">
                            <div class="aui-label aui-label-success aui-label-outlined">重型料</div>
                        </div>
                    </div>
                    <div class="aui-card-list-content aui-border-t" style="margin-left: 3.2rem;display: flex;justify-content: space-between;">
                        <ul class="aui-list aui-list-noborder">
                            <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                                <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                    <div class="aui-list-item-title aui-font-size-14 goods-title aui-text-danger">
                                        <i class="aui-iconfont aui-icon-calendar"></i>
                                        <span class="aui-text-danger">剩余数量：548吨</span>
                                    </div>
                                </div>
                            </div>
                            <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                                <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                    <div class="aui-list-item-title aui-font-size-14 goods-title text-gray">
                                        <i class="aui-iconfont aui-icon-date"></i>
                                        <span class="text-gray">时间：2021-04-26 17:23</span>
                                    </div>
                                </div>
                            </div>
                        </ul>
                        <div class="aui-btn aui-btn-info round xq margin-top margin-right" tapmode onclick="openDialog('text')">了解详情</div>
                    </div>
                </div>
            </div>
            <div class="bg-white">
                <div class="aui-card-list aui-border-t aui-border-b">
                    <div class="aui-card-list-header aui-card-list-user">
                        <div class="aui-card-list-user-avatar">
                            <img src="../image/me/header.jpg" class="aui-img-round">
                        </div>
                        <div class="aui-card-list-user-name">
                            <div class="aui-font-size-16">钢材售卖货品名称</div>
                            <div class="aui-text-danger text-md text-bold">1.2元/吨</div>
                        </div>
                        <div class="aui-card-list-user-info">
                            <div class="aui-label aui-label-success aui-label-outlined">重型料</div>
                        </div>
                    </div>
                    <div class="aui-card-list-content aui-border-t" style="margin-left: 3.2rem;display: flex;justify-content: space-between;">
                        <ul class="aui-list aui-list-noborder">
                            <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                                <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                    <div class="aui-list-item-title aui-font-size-14 goods-title aui-text-danger">
                                        <i class="aui-iconfont aui-icon-calendar"></i>
                                        <span class="aui-text-danger">剩余数量：548吨</span>
                                    </div>
                                </div>
                            </div>
                            <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                                <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                    <div class="aui-list-item-title aui-font-size-14 goods-title text-gray">
                                        <i class="aui-iconfont aui-icon-date"></i>
                                        <span class="text-gray">时间：2021-04-26 17:23</span>
                                    </div>
                                </div>
                            </div>
                        </ul>
                        <div class="aui-btn aui-btn-info round xq margin-top margin-right" tapmode onclick="openDialog('text')">了解详情</div>
                    </div>
                </div>
            </div>
            <div class="bg-white">
                <div class="aui-card-list aui-border-t aui-border-b">
                    <div class="aui-card-list-header aui-card-list-user">
                        <div class="aui-card-list-user-avatar">
                            <img src="../image/me/header.jpg" class="aui-img-round">
                        </div>
                        <div class="aui-card-list-user-name">
                            <div class="aui-font-size-16">钢材售卖货品名称</div>
                            <div class="aui-text-danger text-md text-bold">1.2元/吨</div>
                        </div>
                        <div class="aui-card-list-user-info">
                            <div class="aui-label aui-label-success aui-label-outlined">重型料</div>
                        </div>
                    </div>
                    <div class="aui-card-list-content aui-border-t" style="margin-left: 3.2rem;display: flex;justify-content: space-between;">
                        <ul class="aui-list aui-list-noborder">
                            <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                                <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                    <div class="aui-list-item-title aui-font-size-14 goods-title aui-text-danger">
                                        <i class="aui-iconfont aui-icon-calendar"></i>
                                        <span class="aui-text-danger">剩余数量：548吨</span>
                                    </div>
                                </div>
                            </div>
                            <div class="aui-list-item aui-padded-l-0" style="min-height: 1.2rem;">
                                <div class="aui-list-item-inner" style="min-height: 1.2rem;">
                                    <div class="aui-list-item-title aui-font-size-14 goods-title text-gray">
                                        <i class="aui-iconfont aui-icon-date"></i>
                                        <span class="text-gray">时间：2021-04-26 17:23</span>
                                    </div>
                                </div>
                            </div>
                        </ul>
                        <div class="aui-btn aui-btn-info round xq margin-top margin-right" tapmode onclick="openDialog('text')">了解详情</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/aui-tab.js" ></script>

<script type="text/javascript">

    var vm = {
        el: '#app',
        data: {
            list: []
        },
        mounted: function(){
            this.getList();
        },
        methods: {
            getList: function(){
                let that = this;
            }
        }
    }
    apiready = function() {
        $api.fixStatusBar(
            $api.byId("header")
        );
        // window.app = new Vue(vm);


    };

    function openNewPage(){
        api.openWin({
            name: 'login',
            url: 'public/login_win.html',
        })
    }

    function backpage(){
        api.closeWin({
            name: api.winName
        })
        
    };

    var slide = new auiSlide({
        container:document.getElementById("aui-slide"),
        // "width":300,
        "height":260,
        "speed":300,
        "autoPlay": 0, //自动播放
        "pageShow":true,
        "pageStyle":'dot',
        "loop":true,
        'dotPosition':'center',
        currentPage:currentFun
    })

    function currentFun(index) {
        // console.log(index);
    }
    var slide2 = new auiSlide({
        container:document.getElementById("aui-slide2"),
        // "width":300,
        "height":240,
        "speed":300,
        "autoPlay": 0, //自动播放
        "pageShow":true,
        "loop":true,
        "pageStyle":'dot',
        'dotPosition':'center'
    })
    var slide3 = new auiSlide({
        container:document.getElementById("aui-slide3"),
        // "width":300,
        "height":240,
        "speed":500,
        "autoPlay": 3000, //自动播放
        "loop":true,
        "pageShow":true,
        "pageStyle":'line',
        'dotPosition':'center'
    })
    // console.log(slide3.pageCount());
    apiready = function(){
        api.parseTapmode();
    }
    var tab = new auiTab({
        element:document.getElementById("tab"),
    },function(ret){
        // console.log(ret)
    });
</script>

</html>
